<template>
  <div style="height: 500px; ">
    <ResizableLayout :initialLeftWidth="500" :minLeftWidth="300" :maxLeftWidth="600" :breakpoint="1280">
      <template #left>
        <div style="padding: 20px;">
          <h2>左侧面板</h2>
          <p>在宽屏下可以拖动调整宽度，窄屏下自动换行</p>
        </div>
      </template>
      
      <template #right>
        <div style="padding: 20px;">
          <h2>右侧面板</h2>
          <p>右侧内容区域</p>
        </div>
      </template>
    </ResizableLayout>
  </div>
</template>

<script setup lang="ts">
import ResizableLayout from '../components/ResizableLayout.vue'


</script>